<template>
  <view>
      <view calss="Chatsettings" style="width: 100vw;height:100vh;background-color: #f3f3f3;">
        <up-navbar title="聊天设置" @leftClick="close" placeholder  ></up-navbar>

        <view class="Chatsettings-info">
            <!-- 用户头像和信息 -->
            <view class="user-info">

              <view class="user-details" @click="Viewpersonalinformation(friend)">
                <view class="user-avatar userName">
                  {{showUserName(friend.username)}}
                </view>
                <view class="user-text">
                  <view class="username">{{friend.username}}</view>
                </view>
              </view>

            </view>

            <!-- 搜索 + 功能 -->
            <view class="Chatsettings-find">

              <view class="find-input" @click="searchforClick">
                <up-icon name="search" class="find-icon"></up-icon>
                <view calss="find-name">搜索聊天记录</view>
              </view>

              <view class="find-results">
                <view class="find-item" @click="searchforClick">
                  <image src="@/static/chat/ltjl.png" mode="aspectFill" class="find-item-image" />
                  <text class="find-item-text">聊天记录</text>
                </view>

                <view class="find-item" @click="viewImgClick">
                  <image src="@/static/chat/tupian.png" mode="aspectFill" class="find-item-image" />
                  <text class="find-item-text">图片和视频</text>
                </view>

                <view class="find-item" @click="viewFileDirClick">
                  <image src="@/static/chat/wenjian.png" mode="aspectFill" class="find-item-image" />
                  <text class="find-item-text">文件</text>
                </view>
              </view>

            </view>

            <view class="Chatsettings-function">
              <view class="function-item">
                <view class="function-left">
                  <text>置顶会话</text>
                </view>
                <view class="function-right">
                  <up-switch v-model="Topupconversation" @change="TopupconversationChange"/>
                </view>
              </view>

              <view class="function-item">
                <view class="function-left">
                  <text>消息免打扰</text>
                </view>
                <view class="function-right">
                  <up-switch v-model="Messagefree" @change="MessagefreeChange"/>
                </view>
              </view>
            </view>

            <!-- <view class="Chatsettings-dangerzone">
              <view class="danger-item" @click="clearChatHistory">
                清空聊天记录
              </view>
            </view> -->

          </view>

      </view>
  </view>
</template>

<script>
import { useChatStore, useSocketStore, useUserStore } from '@/pinia-store/user'
import { mapStores } from 'pinia'
import { chatApi } from '@/apis/cloud/chat'
import { processImageUrl } from "@/utils/chat"
export default {
  name: "Chatsettings",
  props: {

  },
  components: {
  },
  data(){
    return {
      Topupconversation:false, // 置顶会话
      Messagefree:false, // 消息免打扰
      Grouplocation:'单聊', // 所在分组
      groupOptions: [
        { label: '置顶', value: 'top', disabled: true },
        { label: '单聊', value: 'single', disabled: false },
        { label: '群聊', value: 'group', disabled: true },
        { label: '消息免打扰', value: 'no-disturb', disabled: true },
        { label: '工作', value: 'work', disabled: true },
        { label: '功能', value: 'feature', disabled: true }
      ],
      selectedGroup: 'single', // 当前选中的分组
      friend:null,
      imInfo:null,
      userInfo:null,
      dialogId:null,
      navigating:false
    }
  },
  computed:{
    ...mapStores(useChatStore, useUserStore, useSocketStore),
  },
  onLoad() {
		this.friend = this.chatStore.chat;// 当前聊天对象信息
		this.imInfo = this.chatStore.imInfo;// 当前登录用户
		this.userInfo = this.userStore.user;
		this.dialogId = this.socketStore.nowDialogId;
  },
  methods: {
    Viewpersonalinformation(value) {
      if (this.navigating) return;
      this.navigating = true;
      let that = this
      uni.navigateTo({
        url: '/pages/addressBook/details/grdetails',
        animationType: 'none',
        success: function (res) {
          setTimeout(() => {
            res.eventChannel.emit('details', { item: value });
            that.navigating = false;
          }, 100);
        },
        fail() {
          that.navigating = false;
        }
      });
    },
    // 搜索聊天记录
    searchforClick(){
      uni.navigateTo({
        url: '/pages/chat/message/chat/SingleChatRecord'
      })
    },

    selectSender() {
      // 跳转或弹出联系人选择器
    },
    // 置顶会话
    TopupconversationChange(e){
      this.Topupconversation = e
    },
    // 消息免打扰
    MessagefreeChange(e){
      this.Messagefree = e
    },
    // 所在分组
    navigateToGroup(){
      let that = this
      uni.navigateTo({
        url: '/pages/chat/message/components/chatGroupChange',
        success: function (res) {
          uni.setStorageSync('ChatnavigateToGroup', JSON.stringify({
            groupOptions:that.groupOptions,
            selectedGroup:that.selectedGroup
          }));

        }
      })
    },
    // 清空聊天记录
    clearChatHistory(){

    },
    // 预览图片
    onPreview(url) {
      const processedUrl = processImageUrl(url); // 使用统一处理方法
      this.imgs = [processedUrl];
      uni.previewImage({
        current: 0,
        urls: imgs,
      })
    },

    // 打开文件和链接弹窗
    viewFileDirClick() {
      uni.navigateTo({
        url: '/pages/chat/message/chat/SingleChatFiles'
      })
    },
    // 关闭聊天设置弹窗
    close() {
			uni.navigateBack();
    },

    viewImgClick(){
      uni.navigateTo({
        url: '/pages/chat/message/chat/SingleChatPicture'
      })
    },
    // 名称超长处理
    showUserName(username) {
      if (username && username.length > 2) {
        return username.substr(1, 2);
      } else {
        return username;
      }
    },

  },
}
</script>

<style scoped lang="scss">
// 聊天设置
.Chatsettings-info{
  margin: 20rpx;
  .user-info {
    padding: 15rpx;
    display: flex;
    height: 11vh;
    border-radius: 20rpx;
    background-color: #ffffff;
    margin-bottom: 30rpx;
    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 15%;
      overflow: hidden;
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4rpx 10rpx 10rpx 10rpx;

      img {
        width: 100%; /* 图片宽度占满容器 */
        height: 100%; /* 图片高度占满容器 */
        border: none; /* 去除边框 */
        object-fit: cover; /* 图片适配容器，保持比例 */
      }

    }
    .userName{
      background:#3d85fc;
      color: #ffffff;
    }
    .user-text {
      text-align: center;
      .username {
        font-size: 25rpx;
      }
    }
  }


  .Chatsettings-find {
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    height: 18vh;
    border-radius: 20rpx;
    background-color: #ffffff;
    margin-bottom: 30rpx;

    .find-input {
      display: flex;
      align-items: center;
      margin: 10rpx;
      padding: 5rpx;
      background: #f3f3f3;
      height: 4vh;
      border-radius: 10rpx;

      .find-icon {
        padding-left: 10rpx;
        padding-right: 10rpx;

        :deep(.u-icon__icon) {
          font-size: 50rpx !important;
        }
      }

      .find-name {
        color: #9b9c9d;
      }
    }

    .find-results {
      display: flex;
      padding: 0 20rpx;
    }

    .find-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20rpx 20rpx;

      &:active {
        background-color: #f5f5f5;
        border-radius: 10%;
      }

      .find-item-image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }

      .find-item-text {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }


  .Chatsettings-function {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .function-left {
        font-size: 28rpx;
        color: #333;
      }

      .function-right {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #666;

        .arrow-icon {
          margin-left: 10rpx;
          :deep(.u-icon__icon) {
            font-size: 24rpx;
          }
        }
      }
    }
  }


  .Chatsettings-quickbar {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;

      .function-left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .desc {
          font-size: 24rpx;
          color: #999;
        }
      }

      .function-right {
        display: flex;
        align-items: center;
      }
    }
  }


  .Chatsettings-dangerzone {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 20rpx;

    .danger-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #e60000; // 钉钉风格红色
      padding: 30rpx 0;

      &:active {
        background-color: #f5f5f5;
        border-radius: 16rpx;
      }
    }
  }
}

// 图片预览
.preview-container {
  position: relative;
  background-color: #000;

  .preview-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .preview-indicator {
    position: absolute;
    bottom: 50rpx;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10rpx 0;
    border-radius: 20rpx;
    width: 120rpx;
    margin: 0 auto;
  }
}
</style>
